// api列表页
window.addEventListener('load', function () {
    // 1.分类数据渲染功能

    //1.1 定义数据源 
    let apiCateDate = [
        { name: '全部', keyword: '身份证实名', isBold: false },
        { name: '生活服务', keyword: '身份证实名', isBold: false },
        { name: '金融科技', keyword: '手机号', isBold: true },
        { name: '交通地理', keyword: '车牌号', isBold: false },
        { name: '充值缴费', keyword: '手机号', isBold: false },
        { name: '数据智能', keyword: 'ip', isBold: false },
        { name: '企业工商', keyword: '营业执照', isBold: false },
        { name: '应用开发', keyword: 'app', isBold: false },
        { name: '电子商务', keyword: 'ip', isBold: false },
        { name: '吃喝玩乐', keyword: '钱', isBold: false }
    ];

    //1.2 遍历数据,拼接结构 
    apiCateDate.forEach(function (v) {
        // console.log(v);

        //创建标签
        let dom = document.createElement('li');

        //添加属性
        // dom.keyword=v.keyword; //自定义属性不能直接使用
        dom.setAttribute('keyword', v.keyword);

        //判定是否加粗
        if (v.isBold) {
            // dom.className='fblod';
            dom.setAttribute('class', 'fblod');
        }

        //添加内容
        dom.textContent = v.name;

        //向指定的apiCate添加新元素
        apiCate.appendChild(dom);
    })


    // 动态渲染搜索框内容

    //1.获取到apiCate中的所有li
    let apiLis = getEleAll('#apiCate li');
    let apiName = getEle('#apiName');
    let apiKeyWord = getEle('#apiKeyWord');

    //2.遍历注册事件
    apiLis.forEach(function (v) {
        // console.log(v);

        //3.注册事件
        v.addEventListener('click', function () {


            //获取当前li的内容
            let cont = this.textContent;
            //获取当前li标签上的keyword 
            let keyw = this.getAttribute('keyword');
            //添加到apiName
            apiName.textContent = cont;
            apiKeyWord.placeholder = keyw;

            //清除所有li标签上的active
            apiLis.forEach(function (vv) {
                vv.classList.remove('active')
            })

            //给当前li添加active,其它li去掉active
            this.classList.add('active');



            // console.log(cont);
        })
    })

    // console.log(apiLis);


    //api列表内容数据渲染
    let apiContDate = [
        // 第一组数据
        { imgUrl: './imgs/API_01.jpg', title: '2021出行防疫政策指南', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_02.jpg', title: '身份证实名认证', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_03.jpg', title: '天气预报', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_04.jpg', title: '银行卡四元素校验', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_05.jpg', title: '短信API服务', price: '￥0.2000/次', isSpecial: true },
        // 第二组数据
        { imgUrl: './imgs/API_01.jpg', title: '2021出行防疫政策指南2', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_02.jpg', title: '身份证实名认证2', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_03.jpg', title: '天气预报2', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_04.jpg', title: '银行卡四元素校验2', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_05.jpg', title: '短信API服务2', price: '￥0.2000/次', isSpecial: true },
        // 第三组数据
        { imgUrl: './imgs/API_01.jpg', title: '2021出行防疫政策指南3', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_02.jpg', title: '身份证实名认证3', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_03.jpg', title: '天气预报3', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_04.jpg', title: '银行卡四元素校验3', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_05.jpg', title: '短信API服务3', price: '￥0.2000/次', isSpecial: true },
        // 第四组数据
        { imgUrl: './imgs/API_01.jpg', title: '2021出行防疫政策指南4', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_02.jpg', title: '身份证实名认证4', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_03.jpg', title: '天气预报4', price: '免费', isSpecial: false },
        { imgUrl: './imgs/API_04.jpg', title: '银行卡四元素校验4', price: '￥0.2000/次', isSpecial: true },
        { imgUrl: './imgs/API_05.jpg', title: '短信API服务4', price: '￥0.2000/次', isSpecial: true },

    ];


    console.log(apiContDate);


    //定义变量
    let currentPage=0;//相当于开始的索引值 ,当前页码
    let sPages=5;  //每一页显示多少条数据


    //console.log(apiContDate.slice(currentPage,sPages));//返回截取到的数组元素





    //渲染函数
    function rander(currentPage,sPages) {
        //定义保存结构
        let apiContHtml = '';

        //遍历数据
        apiContDate.slice(currentPage,sPages).forEach(function (v, i) {
            // console.log(v);

            //拼接结构
            apiContHtml += `
               <li class="rel">
                   <span class="tips ${v.isSpecial ? 'on' : ''}">企业专用</span>
                   <div class="mt55">
                       <a href="#">
                           <img src="${v.imgUrl}" alt="">
                           <p class="c6 mt20b10">
                           ${v.title}
                           </p>
                           <span class="${v.price == '免费' ? 'green' : 'red'}">${v.price}</span>
                       </a>
                   </div>
                   <a href="#" class="link">申请数据</a>
               </li>`
        });

        //把拼接好的数据添加到指定位置
        getEle('#apiContentList').innerHTML = apiContHtml;
    }


    //调用
    rander(currentPage,sPages);


    //分页
    //获取元素对象
    let aLis=getEleAll('#pagesList a');

    //注册a标签的点击事件
    aLis.forEach(function(v){
        // console.log(v);

        v.addEventListener('click',function(){
            //获取当前a标签中的内容
            // let val=this.textContent;

            // if(val==1){
            //     currentPage=0;
            // }else{
            //     currentPage=(val-1)*sPages;
            // }


            // 渲染
            rander((this.textContent-1)*sPages,this.textContent*sPages);

            // console.log(val);
        })
    })

    // console.log(aLis);



})